import React, { Component } from 'react';
import {
  View,Text,StyleSheet,ScrollView,FlatList
} from 'react-native';
import moment from 'moment';
import pxToDp from '../common/comm.js'
import * as DATA from '../data/data'
import BannerImg from './BannerImg';

export default class Home extends Component {
    constructor(props){
        super(props);
        this.state={
            gonggaolist:[]
        }
    }

    componentWillMount(){
        let _that = this;
        fetch(DATA.GONGGAO_URL)
            .then((response) => {       // 数据解析方式
                if (response.ok) {
                    return response.json();
                }
            })
            .then((responseData) => {       // 获取到的数据处理
                if(responseData.status == 1){
                    _that.setState({
                        gonggaolist:responseData.list
                    })
                }
            })
            .catch((error) => { // 错误处理
                alert('获取数据失败，请重试！');
            })
            .done();

            if(this.state.gonggaolist.length != 0){
                for (let i = 0; i < this.state.gonggaolist.length; i++){
                    _that.state.gonggaolist[i]["key"] = i;
                }
            }
        }

  render() {
    return (
      <ScrollView
        contentContainerStyle={styles.contentContainer}
      >
        <GonggaoList data={this.state.gonggaolist}/>
      </ScrollView>
    );
  }
}

class GonggaoList extends Component{

  constructor(props) {
    super(props);

  }



    renderItem({item}) {
        return (
            <View>
                <Text style={styles.title}>{item.title}</Text>
                <Text style={styles.time}>{moment(Number(item.addtime)*1000).format("YYYY-MM-DD HH:mm:ss")}</Text>
                <Text style={styles.content}>{item.content}</Text>
            </View>
        );
    }

  render() {
    return (
      <ScrollView>
          <FlatList
              data={this.props.data}
              renderItem={this.renderItem}
              >
          </FlatList>
      </ScrollView>
    );
  }
}

var styles = StyleSheet.create({
    contentContainer: {
        paddingHorizontal:pxToDp(20)
    },
    title:{
      fontSize:pxToDp(34),
        fontWeight:'bold',
        marginTop:pxToDp(40)
    },
    time:{
        marginVertical:pxToDp(10),
        fontWeight:'bold',
        fontSize:pxToDp(24),
    },
    content:{
        fontSize:pxToDp(24),
        borderBottomWidth:pxToDp(2),
        borderBottomColor:DATA.BASE_COLOR,
        paddingBottom:pxToDp(40)
    }
  });
